<template>
    <van-cell class="comment-item">
        <van-image
            slot="icon"
            class="avatar"
            round
            fit="cover"
            :src="comment.aut_photo"
        />
        <div slot="title">
            <div class="title-wrap">
                <div class="name">{{comment.aut_name}}</div>
                <div class="like-wrap" @click="onCommentLike">
                    <van-icon 
                        :class="{liked:comment.is_liking}" 
                        class="like-icon" 
                        :name="comment.is_liking ? 'good-job' : 'good-job-o'"
                        
                    ></van-icon>
                    <span class="like-count">{{comment.like_count}}</span>
                </div>    
            </div>
        </div>
        <div slot="label">
            <div class="content">{{comment.content}}</div>
            <div class="pudate">
                <span>{{comment.pubdate}}</span>
                <van-button
                    class="reply-btn"
                    round
                    size="mini"
                    @click="$emit('reply-click',comment)"
                >{{ comment.reply_count }}回复</van-button>
            </div>
        </div>
        
    </van-cell>
</template>
<script>
import { addCommentLike , deleteCommentLike } from '@/api/comment'
export default { 
    name:'Comment',
    components:{},
    props:{
        comment:{
            type:[Number,Object,String],
            required:true
        }
    },
    data(){
        return{

        }
    },
    methods: {
        async onCommentLike(){
            const commentId = this.comment.com_id.toString()
            if(this.comment.is_liking){
                await deleteCommentLike(commentId)
                this.comment.like_count--
            }else{
                await addCommentLike(commentId)
                this.comment.like_count++
            }
            this.comment.is_liking = !this.comment.is_liking
        }
    }
}
</script>
<style lang="less" scoped>
.comment-item {
  .avatar {
    width: 36px;
    height: 36px;
    margin-right: 13px;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name {
      color: #406599;
      font-size: 14px;
    }
    .like-wrap{
        display: flex;
        align-items: center;
        align-content: center;
        .like-icon.liked{
            color:#ff69b4;
        }
    }
    .content {
        font-size: 16px;
        color: #222222;
        margin-bottom: 10px;
    }
    .pubdate {
        font-size: 10px;
        margin-right: 10px;
    }
    
    
}
  
  
  
  
}
  
</style>